<template>
	<view class="app">
		<!-- 页面内容开始 -->
		<view style="text-align: center;padding: 20rpx 0;background-color: #f8f8fa;" v-if="options.name">
			{{ options.name }} 的商品出货统计
		</view>
		<view class="search-date-range-view">
			<view class="search-date-range" @click="show.pay_time = true">
				{{
					queryForm.formData.pay_time[0]
						? vk.pubfn.timeFormat(queryForm.formData.pay_time[0], "yyyy/MM/dd") +
						  " - " +
						  vk.pubfn.timeFormat(queryForm.formData.pay_time[1], "yyyy/MM/dd")
						: "日期范围"
				}}
			</view>
			<u-calendar
				v-model="show.pay_time"
				mode="range"
				safe-area-inset-bottom
				@change="calendarChange"
			></u-calendar>
		</view>

		<vk-db-list
			ref="db1"
			url="client/salesman.statsGoodsPerRecords"
			:query-form="queryForm"
			:scroll-top="scrollTop"
			:advanced-search="false"
			:show-total="true"
			:search-input="false"
			search-key="no"
			search-placeholder="输入订单号查询"
			v-slot:default="{ item, index }"
			@footer-btn="footerBtn"
			@show-advanced-search="show.advancedSearch = true"
		>
			<view class="vk-data-list-record-item">
				<view style="margin-right: 20rpx;">
					<image :src="item.cover" style="width: 100rpx;height: 100rpx;" mode="aspectFill"></image>
				</view>
				<view class="list-left">
					<text>{{ item.goods_name }} <text v-if="item.model_value">（{{ item.model_name }}：{{ item.model_value }}）</text> </text>
					<text class="add-time">原价：{{ item.original_price }}</text>
				</view>
				<view class="amount-right">
					<text
						class="red"
					>
						销量：{{ item.num }}
					</text>
				</view>
			</view>
		</vk-db-list>

		<!-- 高级搜索弹窗开始 -->
		<u-popup v-model="show.advancedSearch" mode="top" width="600" closeable>
			<view class="search-popup">
				<scroll-view scroll-y="true" class="scroll-view">
					<view>
						<!-- ****************** 自定义高级搜索表单开始 ****************** -->
						<u-form
							:model="queryForm.formData"
							ref="queryForm"
							label-position="top"
							:label-style="{ fontWeight: '500' }"
						>
							<u-form-item label="添加时间" prop="pay_time">
								<view class="date-range" @click="show.pay_time = true">
									{{
										queryForm.formData.pay_time[0]
											? vk.pubfn.timeFormat(queryForm.formData.pay_time[0], "yyyy/MM/dd") +
											  " - " +
											  vk.pubfn.timeFormat(queryForm.formData.pay_time[1], "yyyy/MM/dd")
											: "日期范围"
									}}
								</view>
							</u-form-item>
							<u-form-item label="订单号" prop="no">
								<u-input v-model="queryForm.formData.no" />
							</u-form-item>
						</u-form>
						<!-- 日历范围选择组件 -->
						<u-calendar
							v-model="show.pay_time"
							mode="range"
							safe-area-inset-bottom
							@change="calendarChange"
						></u-calendar>
						<!-- ****************** 自定义高级搜索表单结束 ****************** -->
					</view>
				</scroll-view>
				<view class="confrim-btn">
					<view class="btn reset" @click="advancedSearchReset">重 置</view>
					<view class="btn confirm" @click="advancedSearchConfirm">确 定</view>
				</view>
			</view>
		</u-popup>
		<!-- 高级搜索弹窗结束 -->

		<!-- 页面内容结束 -->
	</view>
</template>

<script>
var vk = uni.vk; // vk依赖
var originalForms = {}; // 表单初始化数据
export default {
	data() {
		// 页面数据变量
		return {
			// 表单请求数据
			queryForm: {
				// 分页数据
				pagination: {
					pageIndex: 1, //当前页码
					pageSize: 500 //每页显示数量
				},
				// 表单数据源
				formData: {
					pay_time: [],
					no: "",
					state: ""
				},
				columns: [
					{ key: "pay_time", title: "添加时间", type: "datetimerange", width: 320, mode: "[]" },
					{ key: "no", title: "订单号", type: "text", width: 150, mode: "=" }
				],
				sortRule: []
			},
			loading: false, // 是否请求中
			scrollTop: 0, // 滚动条当前位置
			// 每一项底部的拓展按钮
			footerList: [
				{
					index: 0,
					icon: "order",
					text: "查看结算详情",
					showRule: function(item = {}) {
						if (item.calc_rule && item.calc_rule.reward_value) {
							return true;
						} else {
							return false;
						}
					}
				},
				{ index: 1, icon: "order", text: "查看订单号" }
			],
			// 页面上所有弹窗的开关
			show: {
				pay_time: false, // 高级搜索弹窗中的日历选择弹窗开关
				advancedSearch: false // 高级搜索弹窗开关
			},
			options:{}
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options = {}) {
		vk = uni.vk;
		this.options = options;
		this.init(options);
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 监听 - 页面下拉刷新
	onPullDownRefresh() {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	// 监听 - 页面触底部
	onReachBottom(options) {
		if (this.$refs.db1) this.$refs.db1.nextPage();
	},
	// 监听 - 点击右上角转发时
	onShareAppMessage(options) {},
	// 函数
	methods: {
		// 页面数据初始化函数
		init(options) {
			let that = this;
			console.log("init: ", options);
			// 根据url参数status，设置当前选中的状态
			if (options.state) {
				that.queryForm.formData.state = options.state;
			}
			if (options._id) {
				that.queryForm.formData._id = options._id;
			}
			if (vk.pubfn.isNotNullAll(options.startTime, options.endTime)) {
				that.queryForm.formData.pay_time = [Number(options.startTime), Number(options.endTime)];
			}
			// 拷贝一份表单的初始值
			originalForms["queryForm"] = vk.pubfn.copyObject(that.queryForm.formData);
		},
		// 折叠打开后的底部按钮点击事件
		footerBtn({ item, btn }) {
			let that = this;
			if (btn.index === 0) {
				// 查看结算详情
				let calc_rule = item.calc_rule;
				if (calc_rule) {
					let { reward_value, subtract_balance, discount, real_income } = calc_rule;
					vk.alert(
						`销售收入：${vk.pubfn.priceFilter(reward_value)} 元\n支付货款：${vk.pubfn.priceFilter(
							subtract_balance
						)} 元\n货款折扣：${vk.pubfn.toDecimal(
							discount * 10,
							2
						)} 折\n实际收入：${vk.pubfn.priceFilter(real_income)} 元`,
						"结算详情",
						"好的"
					);
				} else {
					vk.toast("无信息");
				}
			} else if (btn.index === 1) {
				// 查看订单号
				vk.alert(`订单号：${item.no}`);
			} else if (btn.index === 2) {
			} else if (btn.index === 3) {
			}
		},
		valueFn(item, index) {
			let that = this;
			let arr = ["cash_amount", "goods_payment_amount"];
			let keyName = arr[index];
			let value =
				typeof item.amount[keyName] !== "undefined"
					? item.amount[keyName]
					: item.amount["refund_" + keyName];
			if (!value) value = 0;
			value = vk.pubfn.priceFilter(value);
			if (value.toString().indexOf("-") == -1) {
				return `+${value}`;
			} else {
				return value;
			}
		},
		// 监听 - 日历组件的change事件
		calendarChange(e) {
			let that = this;
			that.$set(that.queryForm.formData, "pay_time", [
				vk.pubfn.toTimeLong(e.startDate + " 00:00:00"),
				vk.pubfn.toTimeLong(e.endDate + " 23:59:59")
			]);
			that.search();
		},
		search() {
			let that = this;
			if (that.$refs.db1) that.$refs.db1.search();
		},
		// 高级搜索 - 确定按钮
		advancedSearchConfirm() {
			let that = this;
			that.search();
			that.show.advancedSearch = false;
		},
		// 高级搜索 - 重置按钮
		advancedSearchReset() {
			let that = this;
			that.queryForm.formData = vk.pubfn.copyObject(originalForms["queryForm"]);
			that.$nextTick(function() {
				that.search();
			});
		}
	},
	// 计算属性
	computed: {}
};
</script>
<style lang="scss" scoped>
page,
.page,
.app {
	background-color: #f8f8fa;
	min-height: 100vh;
}

/* 高级搜索弹窗 */
.search-popup {
	background-color: #f3f3f3;

	.scroll-view {
		flex: 1;
		height: 1024rpx;
		padding: 0;
	}

	.confrim-btn {
		display: flex;

		.btn {
			flex: 1;
			display: block;
			text-align: center;
			line-height: 80rpx;
		}

		.reset {
			color: #404040;
			background-color: #ffffff;
		}

		.confirm {
			background-color: #4d8feb;
			color: #ffffff;
		}

		.btn:active {
			opacity: 0.7;
		}
	}

	::v-deep .u-form-item {
		background-color: #ffffff;
		display: block;
		padding: 20rpx;
		color: #7e7e7e;
		padding-top: 12rpx;
		color: #262626;
		margin-bottom: 20rpx;
	}

	.date-range {
		text-align: center;
		background-color: #f6f6f6;
		line-height: 60rpx;
		border-radius: 30rpx;
		color: #7f7f7f;
		width: 100%;
	}
}

.amount-right {
	display: flex;
	justify-content: center;
}


.search-date-range-view{
	background-color: #ffffff;
	padding: 20rpx 20rpx;
	.search-date-range {
		text-align: center;
		background-color: #f6f6f6;
		line-height: 60rpx;
		border-radius: 30rpx;
		color: #7f7f7f;
		width: 100%;
	}
}


</style>
